<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>华猫商城</title>
		<style></style>
		<link href="../css/jquery.validator.css" rel="stylesheet">
		<link href="../css/common.css" rel="stylesheet">

		<link href="../plugin/userLib/css/user.css" rel="stylesheet">
		<link href="../plugin/userLib/css/userinfo.css" rel="stylesheet">
		<link href="../plugin/userLib/css/my_user.css" rel="stylesheet">
		<link href="../css/base.css" rel="stylesheet">
		<style>
			/*.bank_list .list_con, .bank_list .con_ctr{
				display: block;
			}*/
		</style>
	</head>

	<body>
		<div id="header"></div>
		<div id="headerBox"></div>
		<!--<div id="nav_menu"></div>-->
		<div class="ZZHT-wrap">
			<div class="ZZHT-header" style="border-bottom: 1px solid #ffffff;">
				<div class="ZZHT-shop-nav">
					<div class="ZZHT-nav-box">
						<a href="#">
							<li class="liselect ZZHT-lfloat ZZHT-nav-boxa">用户中心</li>
						</a>
						<div class="ZZHT-clear"></div>
					</div>
				</div>
				<div class="ZZHT-clear"></div>
			</div>
			<div class="ZZHT-main">
				<div id="user_left"></div>
				<div class="ZZHT-content">

					<div class="ZZHT-user-head clearfix">
						<b>银行卡管理</b>
						<!-- <a href="http://izzht.com/home/users/security.html">返回</a> -->
						<span class="user_bread fr">
        当前位置：<span>我的资料</span>--<span>银行卡管理</span>
						</span>
					</div>
					<div class="main_bank">
						<div class="bank_note">
							注：最多添加5张银行卡
						</div>
						<div class="bank_item clearfix">
							<div class="bank_list bz" v-for="(v,i) in tab" v-if="i<5" @click="click_Card(i)">
								<div class="bank_logo clearfix">
									<!--<img class="fl" src="../plugin/userLib/img/bankicon/ABC.png" alt="">-->
									<span class="fl bank_name">{{v.bankName}}</span>
									<span class="card fr">尾号{{v.accNo.substr(v.accNo.length-4,v.accNo.length)}}</span>
								</div>
								<div class="list_con">
									<p><span class="grays">持卡人姓名：</span><span>{{v.trueName}}</span></p>
									<!--<p>默认银行卡</p>-->
								</div>
								<div class="con_ctr">
									<p class="clearfix"><span class="grays">持卡人姓名：</span><em>{{v.trueName}}</em></p>
									<p class="clearfix">
										<a href="javascript:;" class="fr del_bank" @click="remove_card(i)">删除</a>
									</p>
								</div>
							</div>
							<a href="javascript:;" class="add_bank bz">
								<div class="con">
									<img src="../plugin/userLib/img/add_bank_card.png" alt="">
									<p>添加银行卡</p>
								</div>
							</a>
							<input type="hidden" id="cardNum" value="1">
						</div>
					</div>

				</div>
			</div>
			<div style="clear:both;"></div>
			<br>
		</div>
		<div id="ck3"></div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../plugin/layer/layer.js"></script>
		<script src="../js/common.js"></script>
		<script type="text/javascript" src="../js/ljf_base.js"></script>
		<script src="../plugin/userLib/js/bank.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '.bank_item',
				data: {
					tab: [],
				},
				methods:{
					click_Card:function(i){
						click_Card(i);
					},
					remove_card:function(id){
						remove_card(id);
					}
				}
			});
			$.ajax({ //获取银行卡
				type: "get",
				url: SURL + "usersBankcards/selectUserBranklist",
				data: {
					"userId": localStorage.userId,
				},
				timeout: 5000,
				dataType: 'json',
				success: function(res) {
					console.log(res);
					vm.tab = res.entity;
				}
			});
			//添加银行卡跳转页面判断
			$('.add_bank').click(function(){
			    if(vm.tab.length>=5){
			        layer.msg('最多添加5张银行卡!', {icon: 5});
			        return false;
			    }
				location.href = '6-1.html';
			})
			
			//银行卡选择框
			var click_Card = function(i){
				console.log(i);
			    var index = i;
			    var me = $('.bank_list').eq(i);
			    me.addClass('bank_active').siblings().removeClass('bank_active');
			    if(me.hasClass('bank_active')) {
			        $('.con_ctr').eq(index).show().parent().siblings().find('.con_ctr').hide();
			        $('.list_con').eq(index).hide().parent().siblings().find('.list_con').show();
			    }
			};
			
			var remove_card = function(i){//删除银行卡
				console.log('删除');
				var bankId = vm.tab[i].bankCardId;
				layer.confirm('确认删除',function(index){
					$.ajax({ 
						type: "get",
						url: SURL + "usersBankcards/deleteById",
						data: {
							"usersBankcardsId":bankId,
						},
						timeout: 5000,
						dataType: 'json',
						success: function(res) {
							console.log(res);
							window.location.reload();
						}
					});
				})
			}
		</script>
	</body>

</html>